<script setup lang="ts">
import { ref } from "vue";
import { messageInstance } from "../message/index";
import {ModuleType} from '../global/constast';
const count = ref(5);
const dockClick = () => {
  parent.postMessage(
    { pluginMessage: { type: "create-rectangles",moduleType:ModuleType.dockInit, count: count.value } },"*"
  );
};

const upload = () => {
   parent.postMessage({ pluginMessage: {  type: "create-rectangles",moduleType:ModuleType.uploadIndex} }, "*");
};
const dockInit = (even)=>{
    console.log('接收插件初始化消息:',even);
};
const dockInit2 = (even)=>{
    console.log('接收插件初始化消息:',even);
};
/**
 * 接收上传消息
 * @param even 
 */
const uploadIndex = (even)=>{
    console.log("接收上传消息",even);
}
/**
 * 接收wcag消息
 */
messageInstance.on(ModuleType.dockInit,dockInit);
messageInstance.on(ModuleType.dockInit,dockInit2);
messageInstance.on(ModuleType.uploadIndex,uploadIndex);
</script>

<template>
  <h2>Rectangle Creator</h2>
  Count: <input v-model="count" />
  <div class="operate">
    <button @click="dockClick"><AddIcon />插件初始化</button>
    <button @click="upload">上传</button>
  </div>
</template>
<style>
.operate {
    display: flex;
    gap: 16px;
}
</style>
